<template>
    <main-layout>
        <div class="me-box">
            <div class="header">
                <div class="nickName">
                    <img :src="UserInfo.img">
                </div>
                <h5>{{UserInfo.name}}</h5>
            </div>
            <div class="main">
                <div class="userMes">
                    <div class="item">
                        <img src="../../images/integral.png">
                        积分
                    </div>
                    <div class="item">
                        <img src="../../images/goldCoins.png">
                        金币
                    </div>
                    <div class="item follow">
                        <img src="../../images/follow.png">
                        我的关注
                    </div>
                </div>
                <div class="content">
                    <ul>
                        <li @click="informationEvt">
                            <van-icon name="sort" />
                            个人信息</li>
                        <li @click="ordersEvt">
                            <van-icon name="enlarge" />
                            我的订单</li>
                        <li @click="toOrder">
                            <van-icon name="goods-collect" />
                            我的预约</li>
                        <li @click="toAddressEvt">
                            <van-icon name="location" />
                            地址管理</li>
                        <li @click="changeInformationEvt">
                            <van-icon name="setting" />
                            修改信息</li>
                        <li @click="exitLogin">
                            <van-icon name="share" />
                            退出登录</li>
                    </ul>
                </div>
            </div>
        </div>
    </main-layout>
</template>

<script>
    export default {
        data() {
            return {
                UserInfo:this.$store.getters['common/getUserInfo']
            }
        },

        methods: {
            informationEvt(){
                this.$router.push('/information')
            },
            changeInformationEvt(){
                this.$router.push('/changeInformation')
            },
            toOrder(){
                this.$router.push('/myOrder')
            },
            ordersEvt(){
                this.$router.push('/orders')
            },
            toAddressEvt(){
                this.$router.push('/address')
            },
            exitLogin(){
                this.$store.commit('common/setUserInfo','')
                this.$store.commit('common/setToken','')
                localStorage.setItem('autoText','')
                this.$router.push('/login')
                return
            }
        },
    }
</script>

<style lang="less" scoped>
    .me-box{
        width: 100%;
        height: 100%;
        background-color: #eaeaea;
        .header{
            text-align: center;
            background-color: #fce1da;
            padding: 30px 0 10px;
            .nickName{
                width: 60px;
                height: 60px;
                margin: 0 auto;
                border-radius: 50%;
                background-color: red;
                img{
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;

                }
            }
        }
        .main{
            .userMes{
                display: flex;
                justify-content: space-evenly;
                padding-top: 20px;
                background-color: #fff;
                .item{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    width: 70px;
                    font-size: 12px;
                    font-weight: 600;
                    border-right: 1px solid #e3e3e3;
                    margin-bottom: 10px;
                    text-align: center;
                    img{
                        width: 30px;
                        height:30px;
                        margin: 0 auto;
                        margin-bottom: 6px;
                    }
                }
                .follow{
                    border: none;
                }
            }
            .content{
                background-color: #fff;
                margin-top: 10px;
                padding: 0 20px;
                li{
                    width: 100%;
                    line-height: 36px;
                    font-size: 14px;
                    border-bottom: 3px solid #f1f1f1;
                }
            }
        }
    }
</style>